<template>
  <div class="login_pages">
    <div class="top-box">
      <div class="top-box-inner"></div>
       <img class="img" @click="goh" src="/img/lfh4.png" alt="">
    </div>

    <div class="card">
      <h1>注册</h1>
      <div class="main_panel">
        <p>
          <!-- //用户名 -->
          <i class="iconfont icon-yonghu-copy"></i>
          <input
            type="text"
            placeholder="请输入6-15位字符"
            ref="ipt_uname_value"
            v-model="uname"
            @blur="checkName"
          />

          <i class="iconfont" ref="show_name_wrong"></i>
        </p>

        <!-- 手机号码 -->
        <p>
          <i class="iconfont icon-yonghu-copy"></i>
          <input
            type="text"
            placeholder="请输入手机号码"
            ref="ipt_phone_value"
            v-model="uphone"
            @blur="checkPhone"
          />

          <i class="iconfont" ref="show_phone_wrong"></i>
        </p>

        <!-- 验证码 -->
        <!-- <p>
          <i class="iconfont icon-yonghu-copy"></i>
          <input type="text" placeholder="请输入验证码" />
          <span @click="getSecurityCode">获取验证码</span>
        </p> -->

        <!-- 设置密码 -->
        <p>
          <i class="iconfont icon-mima-copy"></i>
          <input
            type="password"
            placeholder="请设置密码"
            ref="ipt_pwd_value"
            v-model="upwd"
            @blur="checkPwd"
          />

          <i class="iconfont" ref="show_pwd_wrong"></i>
        </p>

        <div class="not_receive_code">
          <router-link to="/login">已有账号，去登陆</router-link>
        </div>
        <button @click="checkForm">一键注册/登录</button>
      </div>
    </div>

    <div class="login">
      <p>其他登录方式</p>

      <div class="ways_login">
        <span><i class="iconfont icon-qq-copy"></i></span>
        <span><i class="iconfont icon-xinlangweibo-copy"></i></span>
        <span><i class="iconfont icon-weixin-copy"></i></span>
      </div>
    </div>
  </div>
</template>

<script>
import "../../src/assets/font333/iconfont.css";
export default {
  data() {
    return {
      uname: "",
      uphone: "",
      upwd: "",
    };
  },
  methods: {
     goh(){
      this.$router.go(-1)
    },
    checkName() {
      let exp = /^\w{4,15}$/;
      if (exp.test(this.uname)) {
        this.$refs.show_name_wrong.style.color = "skyblue";
        this.$refs.show_name_wrong.classList.add("icon-gouhao");
        this.$refs.show_name_wrong.classList.remove("icon-cuowu");
        // console.log("用户名可用 ");
        return true;
      } else {
        this.$refs.ipt_uname_value.value = "";
        this.$refs.ipt_uname_value.placeholder = "用户名格式有误，重新输入";
        this.$refs.show_name_wrong.style.color = "red";
        this.$refs.show_name_wrong.classList.add("icon-cuowu");
        this.$refs.show_name_wrong.classList.remove("icon-gouhao");
        return false;
      }
    },

    checkPhone() {
      let exp = /^1[3-9]\d{9}$/;
      if (exp.test(this.uphone)) {
        this.$refs.show_phone_wrong.style.color = "skyblue";
        this.$refs.show_phone_wrong.classList.add("icon-gouhao");
        this.$refs.show_phone_wrong.classList.remove("icon-cuowu");
        // console.log("可以注册 ");
        return true;
      } else {
        this.$refs.ipt_phone_value.value = "";
        this.$refs.ipt_phone_value.placeholder = "手机号码有误，重新输入";
        this.$refs.show_phone_wrong.style.color = "red";
        this.$refs.show_phone_wrong.classList.add("icon-cuowu");
        this.$refs.show_phone_wrong.classList.remove("icon-gouhao");
        return false;
      }
    },

    checkPwd() {
      let exp = /^\w{6,15}$/;
      if (exp.test(this.upwd)) {
        this.$refs.show_pwd_wrong.style.color = "skyblue";
        this.$refs.show_pwd_wrong.classList.add("icon-gouhao");
        this.$refs.show_pwd_wrong.classList.remove("icon-cuowu");
        console.log(this.$refs.ipt_phone_value);
        return true;
      } else {
        this.$refs.ipt_pwd_value.value = "";
        this.$refs.ipt_pwd_value.placeholder = "请输入6位数字";
        this.$refs.show_pwd_wrong.style.color = "red";
        this.$refs.show_pwd_wrong.classList.add("icon-cuowu");
        this.$refs.show_pwd_wrong.classList.remove("icon-gouhao");
        return false;
      }
    },

    getSecurityCode() {
      this.axios
        .get("/users/verifyImg")
        .then((res) => {
          console.log("注册业务", res);
          if (res.data.code == 200) {
            this.$toast("注册成功");
            this.$router.push("/login");
          }
        })
        .catch((err) => {
          console.error("注册失败", err);
        });
    },

    /** 验证表单 */
    checkForm() {
      // console.log("name" + this.checkName());
      // console.log("phone" + this.checkPhone());
      // console.log("pwd" + this.checkPwd());

      if (this.checkName() && this.checkPhone() && this.checkPwd()) {
        console.log("验证成功，开始发送注册请求...");
        let params = {
          username: this.uname,
          password: this.upwd,
          phone: this.uphone,
        };
        // 发送注册请求
        this.axios
          .post("/users/register", params)
          .then((res) => {
            console.log("注册业务", res);
            console.log(res.data.code);
            if (res.data.code == 0) {
              //状态码为0，即注册成功
              console.log("注册成功");

              //跳转到登录页面
              this.$router.push("/login");
            } else if (res.data.code == -2) {
              // 用户已存在
              console.log("用户名存在");
            }
          })
          .catch((err) => {
            console.error("注册失败", err);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.img{
  width: 35px; height: 35px;
  position: relative;
  top: -48vw;   left: 4vw;
}
.top-box {
  overflow: hidden;
  /* 因为内部伪元素width:140%,必然超出屏幕，所以要溢出隐藏 */
}

.top-box-inner {
  position: relative;
  width: 100%;
  height: 200px;
  /* 定位 */
}

.top-box-inner:after {
  /* 这个伪类的作用就是一个圆弧的背景色 */
  width: 140%;
  height: 200px;
  position: absolute;
  left: -20%;
  /* 之所以left:20%,是因为width:140%，宝贝可以是是别的值，例如width:160%，那么left:30%才能水平居中，可以发现规律的 */
  top: 0;
  z-index: -10;
  /*层叠顺序，最底层显示*/
  content: "";
  border-radius: 0 0 50% 50%;
  /*分别对应 左上 右上 右下 左下*/
  /* background-color: #000000; */

  // background: url(1.jpg) center;
  background: url(../../src/assets/img/2.jpg) center no-repeat;

  /* 将这个伪类水平居中 */
}

.card {
  z-index: 9999;
  border-radius: 7vw;
  width: 82vw;
  height: 88vw;
  background-color: white;
  box-shadow: 0px 0px 3px 3px #eee;
  margin: auto;
  margin-top: -10vh;

  h1 {
    text-align: center;
    padding: 8% 0;
    color: #fad43c;
    font-size: 22px;
  }
  .main_panel {
    margin: 0 10%;
    p {
      padding-bottom: 4vw;
      border-bottom: 1px solid rgb(209, 207, 207);
      margin-bottom: 8px;
      i {
        padding-left: 5px;
        color: #fad43c;
      }
      input {
        padding-left: 15px;
        border: 0;
        outline: none;
        color: #999;
        // background-color: rgba(0, 0, 0, 0);
      }

      span {
        float: right;
        font-size: 12px;
        color: red;
      }
    }

    button {
      margin-top: 5%;
      // display: block;
      background-color: #fad43c;
      width: 100%;
      height: 8vw;
      line-height: 8vw;
      border-radius: 10vw;
      color: white;
      border: 0;
    }

    .not_receive_code {
      // margin-top: 3%;
      margin-top: 5%;
      display: flex;
      justify-content: space-between;

      a {
        text-decoration: none;
        color: #999;
        font-size: 12px;
      }
    }
  }
}

.login {
  /* margin-top: 100px; */
  width: 100vw;
  height: 44.3vw;

  p {
    text-align: center;
    padding: 10%;
    color: #999;
    font-size: 13px;
  }
  .ways_login {
    display: flex;
    justify-content: space-evenly;
  }

  i {
    color: #c3c3c3;
    font-size: 20px;
    padding: 5px;
    border: 2px solid rgb(207, 203, 203);
    border-radius: 50%;
  }
}
</style>